<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-12-20 14:47:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-01-16 15:13:24
-->
<template>
	<div class="content" v-if="orderstatus == 200">
		<div class="psoTitle">
			<div class="posIcon" @click="previousLayer">
				<i class="icon iconfont icon-fanhui"></i>
			</div>
			<div class="posText">查询报告</div>
		</div>
		<div class="_content">
			<div class="head_num">
				<p class="title">你的评分指数</p>
				<div class="num_text">{{ data.score }}</div>
				<div class="pgtime">
					评估时间:{{
            data.id ? data.order_info.create_time : "2023-09-19 14:03"
          }}
				</div>
				<div class="gqtime">
					报告将于
					{{ data.id ? data.order_info.end_time : "2023-09-26 14:03" }}过期
				</div>
			</div>
			<div class="pg-tiem first">
				<header>评分解读</header>
				<div class="jd-box">
					<div class="pfjd">
						<div class="jd-item" :class="data.score >= 0 && data.score <= 20 ? 'active' : ''">
							<p>0-20</p>
							<p>极差</p>
						</div>
						<div class="jd-item" :class="data.score >= 21 && data.score <= 45 ? 'active' : ''">
							<p>21-45</p>
							<p>较差</p>
						</div>
						<div class="jd-item" :class="data.score >= 46 && data.score <= 65 ? 'active' : ''">
							<p>46-65</p>
							<p>一般</p>
						</div>
						<div class="jd-item" :class="data.score >= 66 && data.score <= 85 ? 'active' : ''">
							<p>66-85</p>
							<p>良好</p>
						</div>
						<div class="jd-item" :class="data.score >= 86 && data.score <= 100 ? 'active' : ''">
							<p>86-100</p>
							<p>优秀</p>
						</div>
					</div>
					<div class="tips">
						评分仅供参考,分数越高信用越好。本报告包含身份校验、借贷风险、失信等多个维度,是根据网络行为综合评估的,不包含个人隐私爬虫数据。
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>基本信息</header>
				<div class="jd-box">
					<div class="defInfo flex">
						<div class="user_info">
							<div class="flex">
								<img src=""
									alt="" srcset="" />
								{{ data.id ? data.info.realName : "林萍 38岁（女）" }}
							</div>
							<div class="flex">
								<img src=""
									alt="" srcset="" />
								{{ data.id ? data.info.phoneNumber : "187****3451(深圳市)" }}
							</div>
						</div>
						<div class="cxjg">
							<img src="../assets/index_image/my_12-04eb8b66.png" alt="" srcset="" />
							<div style="padding-right: 12px">查询结果评估</div>
						</div>
					</div>
					<div class="fl-bh flex">
						<div>订单号</div>
						<div>{{ data.order_info.out_trade_no }}</div>
					</div>
					<div class="fl-bh flex">
						<div>身份证号</div>
						<div>
							{{ data.id ? data.info.idCard : "2301**************2222" }}
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>风险信息</header>
				<div class="jd-box">
					<div>多头申请</div>
					<div class="content_info">
						<div class="content_text">网银贷款申请风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_1 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_1 != 'A' &&
                  data.template_data?.a_1 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_1 != 'A' &&
                  data.template_data?.a_1 != 'B' &&
                  data.template_data?.a_1 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_1 != 'A' &&
                  data.template_data?.a_1 != 'B' &&
                  data.template_data?.a_1 != 'C' &&
                  data.template_data?.a_1 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_1 != 'A' &&
                  data.template_data?.a_1 != 'B' &&
                  data.template_data?.a_1 != 'C' &&
                  data.template_data?.a_1 != 'D' &&
                  data.template_data?.a_1 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_1 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">黑名单命中情况风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_2 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_2 != 'A' &&
                  data.template_data?.a_2 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_2 != 'A' &&
                  data.template_data?.a_2 != 'B' &&
                  data.template_data?.a_2 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_2 != 'A' &&
                  data.template_data?.a_2 != 'B' &&
                  data.template_data?.a_2 != 'C' &&
                  data.template_data?.a_2 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_2 != 'A' &&
                  data.template_data?.a_2 != 'B' &&
                  data.template_data?.a_2 != 'C' &&
                  data.template_data?.a_2 != 'D' &&
                  data.template_data?.a_2 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_2 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">P2P 网贷申请风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_3 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_3 != 'A' &&
                  data.template_data?.a_3 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_3 != 'A' &&
                  data.template_data?.a_3 != 'B' &&
                  data.template_data?.a_3 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_3 != 'A' &&
                  data.template_data?.a_3 != 'B' &&
                  data.template_data?.a_3 != 'C' &&
                  data.template_data?.a_3 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_3 != 'A' &&
                  data.template_data?.a_3 != 'B' &&
                  data.template_data?.a_3 != 'C' &&
                  data.template_data?.a_3 != 'D' &&
                  data.template_data?.a_3 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_3 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">P2P 网贷接触时长风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_4 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_4 != 'A' &&
                  data.template_data?.a_4 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_4 != 'A' &&
                  data.template_data?.a_4 != 'B' &&
                  data.template_data?.a_4 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_4 != 'A' &&
                  data.template_data?.a_4 != 'B' &&
                  data.template_data?.a_4 != 'C' &&
                  data.template_data?.a_4 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_4 != 'A' &&
                  data.template_data?.a_4 != 'B' &&
                  data.template_data?.a_4 != 'C' &&
                  data.template_data?.a_4 != 'D' &&
                  data.template_data?.a_4 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_4 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">银行卡关联数风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_5 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_5 != 'A' &&
                  data.template_data?.a_5 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_5 != 'A' &&
                  data.template_data?.a_5 != 'B' &&
                  data.template_data?.a_5 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_5 != 'A' &&
                  data.template_data?.a_5 != 'B' &&
                  data.template_data?.a_5 != 'C' &&
                  data.template_data?.a_5 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_5 != 'A' &&
                  data.template_data?.a_5 != 'B' &&
                  data.template_data?.a_5 != 'C' &&
                  data.template_data?.a_5 != 'D' &&
                  data.template_data?.a_5 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_5 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">身份证号关联数风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_6 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_6 != 'A' &&
                  data.template_data?.a_6 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_6 != 'A' &&
                  data.template_data?.a_6 != 'B' &&
                  data.template_data?.a_6 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_6 != 'A' &&
                  data.template_data?.a_6 != 'B' &&
                  data.template_data?.a_6 != 'C' &&
                  data.template_data?.a_6 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_6 != 'A' &&
                  data.template_data?.a_6 != 'B' &&
                  data.template_data?.a_6 != 'C' &&
                  data.template_data?.a_6 != 'D' &&
                  data.template_data?.a_6 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_6 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">手机号新增数风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_7 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_7 != 'A' &&
                  data.template_data?.a_7 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_7 != 'A' &&
                  data.template_data?.a_7 != 'B' &&
                  data.template_data?.a_7 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_7 != 'A' &&
                  data.template_data?.a_7 != 'B' &&
                  data.template_data?.a_7 != 'C' &&
                  data.template_data?.a_7 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_7 != 'A' &&
                  data.template_data?.a_7 != 'B' &&
                  data.template_data?.a_7 != 'C' &&
                  data.template_data?.a_7 != 'D' &&
                  data.template_data?.a_7 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_7 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">灰名单命中情况风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_8 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_8 != 'A' &&
                  data.template_data?.a_8 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_8 != 'A' &&
                  data.template_data?.a_8 != 'B' &&
                  data.template_data?.a_8 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_8 != 'A' &&
                  data.template_data?.a_8 != 'B' &&
                  data.template_data?.a_8 != 'C' &&
                  data.template_data?.a_8 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_8 != 'A' &&
                  data.template_data?.a_8 != 'B' &&
                  data.template_data?.a_8 != 'C' &&
                  data.template_data?.a_8 != 'D' &&
                  data.template_data?.a_8 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_8 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">金融业务需求增加情况风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color"
								:class="data.template_data?.a_9 != 'A' ? 'content_color_b' : ''"></view>
							<view class="content_color" :class="
                  data.template_data?.a_9 != 'A' &&
                  data.template_data?.a_9 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_9 != 'A' &&
                  data.template_data?.a_9 != 'B' &&
                  data.template_data?.a_9 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_9 != 'A' &&
                  data.template_data?.a_9 != 'B' &&
                  data.template_data?.a_9 != 'C' &&
                  data.template_data?.a_9 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_9 != 'A' &&
                  data.template_data?.a_9 != 'B' &&
                  data.template_data?.a_9 != 'C' &&
                  data.template_data?.a_9 != 'D' &&
                  data.template_data?.a_9 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_9 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">名单类综合命中情况风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color" :class="
                  data.template_data?.a_10 != 'A' ? 'content_color_b' : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_10 != 'A' &&
                  data.template_data?.a_10 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_10 != 'A' &&
                  data.template_data?.a_10 != 'B' &&
                  data.template_data?.a_10 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_10 != 'A' &&
                  data.template_data?.a_10 != 'B' &&
                  data.template_data?.a_10 != 'C' &&
                  data.template_data?.a_10 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_10 != 'A' &&
                  data.template_data?.a_10 != 'B' &&
                  data.template_data?.a_10 != 'C' &&
                  data.template_data?.a_10 != 'D' &&
                  data.template_data?.a_10 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_10 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">历史决策流通过情况风险等级</div>
						<div class="content_color_box">
							<view class="content_color content_color_a"></view>
							<view class="content_color" :class="
                  data.template_data?.a_11 != 'A' ? 'content_color_b' : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_11 != 'A' &&
                  data.template_data?.a_11 != 'B'
                    ? 'content_color_c'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_11 != 'A' &&
                  data.template_data?.a_11 != 'B' &&
                  data.template_data?.a_11 != 'C'
                    ? 'content_color_d'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_11 != 'A' &&
                  data.template_data?.a_11 != 'B' &&
                  data.template_data?.a_11 != 'C' &&
                  data.template_data?.a_11 != 'D'
                    ? 'content_color_e'
                    : ''
                "></view>
							<view class="content_color" :class="
                  data.template_data?.a_11 != 'A' &&
                  data.template_data?.a_11 != 'B' &&
                  data.template_data?.a_11 != 'C' &&
                  data.template_data?.a_11 != 'D' &&
                  data.template_data?.a_11 != 'E'
                    ? 'content_color_f'
                    : ''
                "></view>
							<view class="content_color_text">{{ data.template_data?.a_11 }}级</view>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">金融软件登录情况风险等级</div>
						<div class="content_color_box">
							<span class="content_color content_color_a"></span>
							<span class="content_color" :class="
                  data.template_data?.a_12 != 'A' ? 'content_color_b' : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.a_12 != 'A' &&
                  data.template_data?.a_12 != 'B'
                    ? 'content_color_c'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.a_12 != 'A' &&
                  data.template_data?.a_12 != 'B' &&
                  data.template_data?.a_12 != 'C'
                    ? 'content_color_d'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.a_12 != 'A' &&
                  data.template_data?.a_12 != 'B' &&
                  data.template_data?.a_12 != 'C' &&
                  data.template_data?.a_12 != 'D'
                    ? 'content_color_e'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.a_12 != 'A' &&
                  data.template_data?.a_12 != 'B' &&
                  data.template_data?.a_12 != 'C' &&
                  data.template_data?.a_12 != 'D' &&
                  data.template_data?.a_12 != 'E'
                    ? 'content_color_f'
                    : ''
                "></span>
							<span class="content_color_text">{{ data.template_data?.a_12 }}级</span>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>多头申请</header>
				<div class="jd-box xyqk">
					<div class="dtc">多头申请</div>
					<div class="charts-box" style="width: 100%; height: 180px; position: relative">
						<qiun-vue-ucharts type="column" :opts="data.opts" :chartData="data.chartData" />
					</div>
					<div class="dtc dtc-m">多头申请汇总</div>
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">申请机构数</div>
							<div class="tb-right">{{ data.template_data.b_4 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">申请消费金融类机构数</div>
							<div class="tb-right">{{ data.template_data.b_5 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">申请网络贷款类机构数</div>
							<div class="tb-right">{{ data.template_data.b_6 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">总申请次数</div>
							<div class="tb-right">{{ data.template_data.b_7 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">最近申请时间</div>
							<div class="tb-right">{{ data.template_data.b_8 }}</div>
						</div>
					</div>
					<div class="content_info">
						<div class="content_text">金融平台申请风险等级</div>
						<div class="content_color_box">
							<span class="content_color content_color_a"></span>
							<span class="content_color"
								:class="data.template_data?.b_9 != 'A' ? 'content_color_b' : ''"></span>
							<span class="content_color" :class="
                  data.template_data?.b_9 != 'A' &&
                  data.template_data?.b_9 != 'B'
                    ? 'content_color_c'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.b_9 != 'A' &&
                  data.template_data?.b_9 != 'B' &&
                  data.template_data?.b_9 != 'C'
                    ? 'content_color_d'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.b_9 != 'A' &&
                  data.template_data?.b_9 != 'B' &&
                  data.template_data?.b_9 != 'C' &&
                  data.template_data?.b_9 != 'D'
                    ? 'content_color_e'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.b_9 != 'A' &&
                  data.template_data?.b_9 != 'B' &&
                  data.template_data?.b_9 != 'C' &&
                  data.template_data?.b_9 != 'D' &&
                  data.template_data?.b_9 != 'E'
                    ? 'content_color_f'
                    : ''
                "></span>
							<span class="content_color_text">{{ data.template_data?.b_9 }}级</span>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>多头借贷</header>
				<div class="jd-box">
					<div class="dtc dtc-m">放款情况</div>
					<div style="width: 100%; height: 180px; position: relative">
						<qiun-vue-ucharts type="column" :opts="data.opts2" :chartData="data.chartData2" />
					</div>
					<div class="dtc dtc-m">放款总金额</div>
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">时间</div>
							<div class="tb-right">总金额（元）</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 1 个月贷款总金额</div>
							<div class="tb-right">{{ data.template_data.c_11 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 3 个月贷款总金额</div>
							<div class="tb-right">{{ data.template_data.c_12 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 6 个月贷款总金额</div>
							<div class="tb-right">{{ data.template_data.c_13 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 12 个月贷款总金额</div>
							<div class="tb-right">{{ data.template_data.c_14 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 24 个月贷款总金额</div>
							<div class="tb-right">{{ data.template_data.c_15 }}</div>
						</div>
					</div>
					<div class="dtc dtc-m">机构类型</div>
					<div class="jglx">近12个月机构类型</div>
					<div style="width: 100%; height: 150px; position: relative">
						<qiun-vue-ucharts type="ring" :opts="data.opts3" :chartData="data.chartData3" />
					</div>
					<div class="jglx">近24个月机构类型</div>
					<div style="width: 100%; height: 150px; position: relative">
						<qiun-vue-ucharts type="ring" :opts="data.opts4" :chartData="data.chartData4" />
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>逾期情况</header>
				<div class="jd-box">
					<div class="dtc dtc-m">逾期统计</div>
					<div style="width: 100%; height: 180px; position: relative">
						<qiun-vue-ucharts type="column" :opts="data.opts5" :chartData="data.chartData5" />
					</div>
					<div class="dtc dtc-m">逾期金额</div>
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">类型</div>
							<div class="tb-right">金额（元）</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 6 个月累计逾期金额</div>
							<div class="tb-right">{{ data.template_data.d_7 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 12 个月累计逾期金额</div>
							<div class="tb-right">{{ data.template_data.d_8 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近 24 个月累计逾期金额</div>
							<div class="tb-right">{{ data.template_data.d_9 }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>履约情况</header>
				<div class="jd-box">
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">正常还款订单数占贷款总订单数比例</div>
							<div class="tb-right">{{ data.template_data.e_1 }}%</div>
						</div>
						<div class="flex">
							<div class="tb-left">最近一次履约距今天数</div>
							<div class="tb-right">{{ data.template_data.e_2 }}+天</div>
						</div>
						<div class="flex">
							<div class="tb-left">贷款已结清机构数</div>
							<div class="tb-right">{{ data.template_data.e_3 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">信用贷款时长</div>
							<div class="tb-right">{{ data.template_data.e_4 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">最近一次贷款时间</div>
							<div class="tb-right">{{ data.template_data.e_5 }}</div>
						</div>
					</div>
					<div class="dtc dtc-m" style="margin-top: 20px; margin-bottom: 10px">
						还款扣款失败数
					</div>
					<div style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            ">
						<qiun-vue-ucharts type="column" :opts="data.opts6" :chartData="data.chartData6" />
					</div>
					<div class="dtc dtc-m">履约次数</div>
					<div style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            ">
						<qiun-vue-ucharts type="column" :opts="data.opts7" :chartData="data.chartData7" />
					</div>
					<div class="dtc dtc-m">履约金额</div>
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">时间</div>
							<div class="tb-right">履约金额（元）</div>
						</div>
						<div class="flex">
							<div class="tb-left">近1个月履约贷款总金额</div>
							<div class="tb-right">{{ data.template_data?.e_16 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近3个月履约贷款总金额</div>
							<div class="tb-right">{{ data.template_data?.e_17 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近6个月履约贷款总金额</div>
							<div class="tb-right">{{ data.template_data?.e_18 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近12个月履约贷款总金额</div>
							<div class="tb-right">{{ data.template_data?.e_19 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">近24个月履约贷款总金额</div>
							<div class="tb-right">{{ data.template_data?.e_20 }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem xyqk">
				<header>信用情况</header>
				<div class="jd-box">
					<div class="dtc dtc-m">负债情况</div>
					<div style="width: 100%; height: 180px; position: relative" _echarts_instance_="ec_1703066233567">
						<qiun-vue-ucharts type="column" :opts="data.opts8" :chartData="data.chartData8" />
					</div>
					<div class="content_info">
						<div class="content_text">多方共债情况风险等级</div>
						<div class="content_color_box">
							<span class="content_color content_color_a"></span>
							<span class="content_color"
								:class="data.template_data?.f_5 != 'A' ? 'content_color_b' : ''"></span>
							<span class="content_color" :class="
                  data.template_data?.f_5 != 'A' &&
                  data.template_data?.f_5 != 'B'
                    ? 'content_color_c'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_5 != 'A' &&
                  data.template_data?.f_5 != 'B' &&
                  data.template_data?.f_5 != 'C'
                    ? 'content_color_d'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_5 != 'A' &&
                  data.template_data?.f_5 != 'B' &&
                  data.template_data?.f_5 != 'C' &&
                  data.template_data?.f_5 != 'D'
                    ? 'content_color_e'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_5 != 'A' &&
                  data.template_data?.f_5 != 'B' &&
                  data.template_data?.f_5 != 'C' &&
                  data.template_data?.f_5 != 'D' &&
                  data.template_data?.f_5 != 'E'
                    ? 'content_color_f'
                    : ''
                "></span>
							<span class="content_color_text">{{ data.template_data?.f_5 }}级</span>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="dtc dtc-m">授信额度</div>
					<div class="zxtable">
						<div class="flex">
							<div class="tb-left">网贷建议授信额度</div>
							<div class="tb-right">{{ data.template_data.f_6 }}元</div>
						</div>
						<div class="flex">
							<div class="tb-left">网贷额度置信度</div>
							<div class="tb-right">{{ data.template_data.f_7 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">消金建议授信额度</div>
							<div class="tb-right">{{ data.template_data.f_8 }}元</div>
						</div>
						<div class="flex">
							<div class="tb-left">消金额度置信度</div>
							<div class="tb-right">{{ data.template_data.f_9 }}</div>
						</div>
						<div class="flex">
							<div class="tb-left">网络贷款机构最大授信额度</div>
							<div class="tb-right">{{ data.template_data.f_10 }}元</div>
						</div>
						<div class="flex">
							<div class="tb-left">网络贷款机构平均授信额度</div>
							<div class="tb-right">{{ data.template_data.f_11 }}元</div>
						</div>
						<div class="flex">
							<div class="tb-left">消金贷款类机构最大授信额度</div>
							<div class="tb-right">{{ data.template_data.f_12 }}元</div>
						</div>
						<div class="flex">
							<div class="tb-left">消金贷款类机构平均授信额度</div>
							<div class="tb-right">{{ data.template_data.f_13 }}元</div>
						</div>
					</div>
					<div class="dtc dtc-m">租赁情况</div>
					<div style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            ">
						<qiun-vue-ucharts type="column" :opts="data.opts9" :chartData="data.chartData9" />
					</div>
					<div class="content_info">
						<div class="content_text">融资租赁业务频繁情况风险等级</div>
						<div class="content_color_box">
							<span class="content_color content_color_a"></span><span class="content_color" :class="
                  data.template_data?.f_18 != 'A' ? 'content_color_b' : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_18 != 'A' &&
                  data.template_data?.f_18 != 'B'
                    ? 'content_color_c'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_18 != 'A' &&
                  data.template_data?.f_18 != 'B' &&
                  data.template_data?.f_18 != 'C'
                    ? 'content_color_d'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_18 != 'A' &&
                  data.template_data?.f_18 != 'B' &&
                  data.template_data?.f_18 != 'C' &&
                  data.template_data?.f_18 != 'D'
                    ? 'content_color_e'
                    : ''
                "></span>
							<span class="content_color" :class="
                  data.template_data?.f_18 != 'A' &&
                  data.template_data?.f_18 != 'B' &&
                  data.template_data?.f_18 != 'C' &&
                  data.template_data?.f_18 != 'D' &&
                  data.template_data?.f_18 != 'E'
                    ? 'content_color_f'
                    : ''
                "></span>
							<span class="content_color_text">{{ data.template_data?.f_18 }}级</span>
						</div>
						<div class="content_base_text">
							<span class="content_base_text">风险低</span><span class="content_base_text">风险高</span>
						</div>
					</div>
					<div class="content_base">
						历史租赁申请最高风险分数： {{ data.template_data?.f_19 }}分
					</div>
					<div class="content_base">
						是否命中租赁黑名单： {{ data.template_data?.f_20 }}
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>被执行人信息</header>
				<div class="jd-box">
					<div class="header_top">共0条记录</div>
					<div class="tips-zx">
						<div class="titless">建议</div>
						<div class="textss">
							如有被执行人相关文书，请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被
							执行人名单。
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem">
				<header>失信被执行人信息</header>
				<div class="jd-box">
					<div class="header_top">共0条记录</div>
					<div v-if="false">
						<div class="flex_zx">
							<div class="zx-left">姓名</div>
							<div class="zx-right">张*林</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">身份证号</div>
							<div class="zx-right">3425**********8218</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">年龄</div>
							<div class="zx-right">29</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">性别</div>
							<div class="zx-right">男性</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">省份</div>
							<div class="zx-right">安徽</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">案号</div>
							<div class="zx-right">(2023)皖1**2执1**5号</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">立案时间</div>
							<div class="zx-right">2023-03-23</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">执行法院</div>
							<div class="zx-right">宣城市***人民法院</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">执行依据文号</div>
							<div class="zx-right">(2023)皖1**2诉前调确1*0号</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">做出执行依据单位</div>
							<div class="zx-right">宣城市***人民法院</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">被执行人的履行情况</div>
							<div class="zx-right">全部未履行</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">失信类型</div>
							<div class="zx-right">
								申请人张*林与杨*鑫于2023年2月21日经宣城市诉调对接人民调解委员会主持调解达成的调解协议有效。当事人应当按照调解协议的约定自觉履行义务。一方当事人拒绝履行或者未全部履行的，对方当事人可以向人民法院申请执行。
							</div>
						</div>
						<div class="flex_zx">
							<div class="zx-left">发布时间</div>
							<div class="zx-right">2023年05月29日</div>
						</div>
					</div>
					<div class="tips-zx tips-zx-color">
						<div class="titless">说明</div>
						<div class="textss">
							失信被执行人，是指有履行能力但是逃避执行、规避执行、抗拒执行的被执行人，俗称老赖。
							法院被执行人
							是指在法定的上诉期满后，或终审判决作出后，拒不履行法院判决或仲裁裁决的当事人。
						</div>
					</div>
					<div class="tips-zx">
						<div class="titless">建议</div>
						<div class="textss">
							如有被执行人相关文书，请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被
							执行人名单。
						</div>
					</div>
				</div>
			</div>
			<div class="pg-tiem buttom-recommendation">
				<div class="buttom_title">提高信用评分消除风险的建议</div>
				<div class="buttom_text">
					提高信用评分消除风险的建议: <br />
					1.信用卡一年内申请不超过 6 次,含同一机构,网贷 3 个月内申请不超过 20
					次,控制申请频率; 2.如果有逾期或者被执行等不良记录,保持良好信用 1-2
					年,记录可以滚动覆盖过去;<br />
					3.保持良好的借贷习惯,切勿频繁申请,拒绝不明平台的审核邀请;<br />
					4.减少和网贷黑名单这类人群的联系,提高自己朋友圈优良信用人群比例
				</div>
			</div>
			<div class="pg-tiem buttom-recommendation">
				<div class="buttom_title">大数据报告说明</div>
				<div class="buttom_text">
					报告由本人授权查询，本报告包含身份校验、借贷风险、失信等多个维度,是根据网络行为综合评估的,不包含个人隐私爬虫数据。
					只做大数据信息的获取及分析，不对原始数据做任何修改，仅供参考使用。如你对报告有异议，出于对合作平台数据隐私的保
					护 ，平台将不做任何解释
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		defineProps,
		defineEmits
	} from "vue";
	import {
		setItem,
		removeItem,
		getItem
	} from "../uint/localStorage.js";
	import qiunVueUcharts from "@qiun/vue-ucharts";
	import request from "../api/reuests";
	import {
		useRouter,
		useRoute
	} from "vue-router";

	const myRequest = (options) => {
		return new Promise((resolve, reject) => {
			// 封装主体：网络请求
			request({
					url: options.url,
					data: options.data || {},
					method: options.method || 'GET', // 默认值GET，如果有需要改动，在options中设定其他的method值
				}).then((res) => {
					console.log(res); // 控制台显示数据信息
					resolve(res)
				})
				.catch((err) => {
					// 返回错误消息
					console.error(err);
					ElMessage.error("请求接口失败");
					reject(err)
				});
		})
	}

	const router = useRouter();
	const route = useRoute();
	const data = reactive({
		score: 0, // 评分指数
		id: "",
		order_info: {},
		info: "",
		template_data: {
			score: 78,
			a_1: "C",
			a_2: "C",
			a_3: "B",
			a_4: "B",
			a_5: "C",
			a_6: "B",
			a_7: "C",
			a_8: "C",
			a_9: "B",
			a_10: "C",
			a_11: "B",
			a_12: "B",
			b_1: "0",
			b_2: "0",
			b_3: "4",
			b_4: "3",
			b_5: "1",
			b_6: "0",
			b_7: "8",
			b_8: "2023-06",
			b_9: "C",
		},
		chartData: {
			categories: ["近1个月", "近3个月", "近6个月"],
			series: [{
				name: "申请次数",
				data: [0, 0, 5],
			}, ],
		},
		chartData2: {
			categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
			series: [{
					name: "放贷次数",
					data: [0, 0, 0, 0, 44],
				},
				{
					name: "放贷机构数",
					data: [0, 0, 0, 0, 14],
				},
			],
		},
		chartData3: {
			series: [{
				data: [{
						name: "消费金融机构数:0",
						value: 0,
					},
					{
						name: "网络贷款机构数:0",
						value: 0,
					},
				],
			}, ],
		},
		chartData4: {
			series: [{
				data: [{
						name: "消费金融机构数:8",
						value: 8,
					},
					{
						name: "网络贷款机构数:6",
						value: 6,
					},
				],
			}, ],
		},
		chartData5: {
			categories: ["近6个月", "近12个月", "近24个月"],
			series: [{
					name: "M0逾期笔数",
					data: [0, 0, 7],
				},
				{
					name: "M1逾期笔数",
					data: [0, 0, 1],
				},
			],
		},
		chartData6: {
			categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
			series: [{
				name: "扣款失败数",
				data: [13, 13, 13, 32, 660],
			}, ],
		},
		chartData7: {
			categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
			series: [{
				name: "履约次数",
				data: [0, 0, 0, 0, 10],
			}, ],
		},
		chartData8: {
			categories: ["产品数", "机构数"],
			series: [{
					name: "消费金融",
					data: [16, 12],
				},
				{
					name: "网络贷款",
					data: [2, 2],
				},
			],
		},
		chartData9: {
			categories: ["近七天", "近1个月", "近3个月", "近6个月"],
			series: [{
				name: "申请次数",
				data: [3, 5, 5, 8],
			}, ],
		},
		opts: {
			color: ["#196dff"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				// splitNumber: 4,
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				column: {
					type: "group",
				},
			},
		},
		opts2: {
			color: ["#196dff", "#ffba19"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
		opts3: {
			rotate: false,
			rotateLock: false,
			color: ["#196dff", "#ffba19"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: true,
				position: "right",
				lineHeight: 25,
			},
			title: {
				name: "",
				fontSize: 15,
				color: "#666666",
			},
			subtitle: {
				name: "",
				fontSize: 25,
				color: "#7cb5ec",
			},
			extra: {
				ring: {
					// ringWidth: 60,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				},
			},
		},
		opts4: {
			rotate: false,
			rotateLock: false,
			color: ["#196dff", "#ffba19"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: true,
				position: "right",
				lineHeight: 25,
			},
			title: {
				name: "",
				fontSize: 15,
				color: "#666666",
			},
			subtitle: {
				name: "",
				fontSize: 25,
				color: "#7cb5ec",
			},
			extra: {
				ring: {
					// ringWidth: 60,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				},
			},
		},
		opts5: {
			color: ["#196dff", "#ffba19"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				splitNumber: 7,
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
		opts6: {
			color: ["#ffba19"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
		opts7: {
			color: ["#196dff", "#ffba19"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
		opts8: {
			color: ["#ffba19", "#196dff"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
		opts9: {
			color: ["#ffba19"],
			padding: [15, 30, 30, 30],
			enableScroll: false,
			// dataLabel: false,
			legend: {
				position: "bottom",
				float: "center",
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				data: [{
					min: 0,
				}, ],
			},
			extra: {
				pieLabelNone: true,
				column: {
					label: {
						show: false, // 设置为false隐藏数据标签
					},
					type: "group",
					// width: 60,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
				},
			},
		},
	});
	
	const orderstatus = ref(201)
	const  getOrderStatus = async () => {
		const res = await myRequest({
			url: '/index/getorderstatusbyid',
			method: 'POST',
			data: {
				id: data.id
			},
		})
		
		console.log(res.code);
		// 给页面的数据赋值
		orderstatus.value = res.code;
		console.log(orderstatus.value)
		if (orderstatus.value == 200) {
			clearInterval(orderstatus_timer.value)
			// uni.hideLoading()
			loading.value.close()
			getDetail();
		}
		// this.backendData =res.data;
	};

	const getDetail = () => {
		request({
				url: "/index/getDetail",
				method: "POST",
				data: {
					id: data.id,
				},
			})
			.then((res) => {
				if (res.code == 200) {
					data.order_info = res.data;
					data.info = res.data.user;
					if (res.data.template) {
						let template_data = res.data.template;
						data.score = template_data.score;
						data.template_data = template_data;
						dataEcherts(data.template_data);
					} else {
						data.score = 78;
					}
				} else {
					ElMessage.error(res.msg);
				}
			})
			.catch((err) => {
				console.error(err);
			});
	};

	const dataEcherts = (template_data) => {
		setTimeout(function() {
			data.chartData = {
				categories: ["近1个月", "近3个月", "近6个月"],
				series: [{
					name: "申请次数",
					data: [
						Number(template_data.b_1),
						Number(template_data.b_2),
						Number(template_data.b_3),
					],
				}, ],
			};

			data.chartData2 = {
				categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
				series: [{
						name: "放贷次数",
						data: [
							Number(template_data.c_1),
							Number(template_data.c_2),
							Number(template_data.c_3),
							Number(template_data.c_4),
							Number(template_data.c_5),
						],
					},
					{
						name: "放贷机构数",
						data: [
							Number(template_data.c_6),
							Number(template_data.c_7),
							Number(template_data.c_8),
							Number(template_data.c_9),
							Number(template_data.c_10),
						],
					},
				],
			};

			data.chartData3 = {
				series: [{
					data: [{
							name: "消费金融机构数:" + template_data.c_16,
							value: Number(template_data.c_16),
						},
						{
							name: "网络贷款机构数:" + template_data.c_17,
							value: Number(template_data.c_17),
						},
					],
				}, ],
			};

			data.chartData4 = {
				series: [{
					data: [{
							name: "消费金融机构数:" + template_data.c_18,
							value: Number(template_data.c_18),
						},
						{
							name: "网络贷款机构数:" + template_data.c_19,
							value: Number(template_data.c_19),
						},
					],
				}, ],
			};

			data.chartData5 = {
				categories: ["近6个月", "近12个月", "近24个月"],
				series: [{
						name: "M0逾期笔数",
						data: [
							Number(template_data.d_1),
							Number(template_data.d_2),
							Number(template_data.d_3),
						],
					},
					{
						name: "M1逾期笔数",
						data: [
							Number(template_data.d_4),
							Number(template_data.d_5),
							Number(template_data.d_6),
						],
					},
				],
			};

			data.chartData6 = {
				categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
				series: [{
					name: "扣款失败数",
					data: [
						Number(template_data.e_6),
						Number(template_data.e_7),
						Number(template_data.e_8),
						Number(template_data.e_9),
						Number(template_data.e_10),
					],
				}, ],
			};

			data.chartData7 = {
				categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
				series: [{
					name: "履约次数",
					data: [
						Number(template_data.e_11),
						Number(template_data.e_12),
						Number(template_data.e_13),
						Number(template_data.e_14),
						Number(template_data.e_15),
					],
				}, ],
			};

			data.chartData8 = {
				categories: ["产品数", "机构数"],
				series: [{
						name: "消费金融",
						data: [Number(template_data.f_1), Number(template_data.f_2)],
					},
					{
						name: "网络贷款",
						data: [Number(template_data.f_3), Number(template_data.f_4)],
					},
				],
			};

			data.chartData9 = {
				categories: ["近七天", "近1个月", "近3个月", "近6个月"],
				series: [{
					name: "申请次数",
					data: [
						Number(template_data.f_14),
						Number(template_data.f_15),
						Number(template_data.f_16),
						Number(template_data.f_17),
					],
				}, ],
			};
		}, 1000);
	};
	const previousLayer = () => {
		router.go(-1);
	};
	
	const orderstatus_timer = ref(null);
	const loading = ref(null)
	
	onMounted(() => {
		data.id = route.query?.id;
		data.info = getItem("info");
		if (data.id) {
			loading.value = ElLoading.service({
				lock: true,
				text: '正在查询中……',
				background: 'rgba(0, 0, 0, 0.7)',
			})
			
			orderstatus_timer.value = setInterval(function() {
				getOrderStatus()
			}, 1000);
			
			
			// getDetail();
		} else {
			ElMessage.error("订单不存在");
			setTimeout(function() {
				router.push({
					path: "/index"
				});
			}, 300);
		}
	});
</script>

<style lang="less" scoped>
	.content {
		min-height: 100vh;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-image: url(../assets/index_image/h5-18255dc0.png);
		background-size: cover;
	}

	.psoTitle {
		background-color: #fff;
		width: 100%;
		height: 44px;
		line-height: 44px;
		display: flex;
		align-items: center;
		box-shadow: 0 3px 5px #00000017;
		max-width: 750px;
		margin: 0 auto;
	}

	.posIcon {
		height: 44px;
		width: 44px;
		text-align: center;
		justify-content: center;
		position: absolute;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.posText {
		height: 44px;
		width: 100%;
		line-height: 44px;
		text-align: center;
		font-size: 16px;
	}

	._content {
		margin: 0 auto;
		overflow-y: auto;
		box-sizing: border-box;
		max-width: 750px;
		box-shadow: 0 0 15px 4px #dbcfad;
		padding-bottom: 20px;
		position: relative;
		max-height: calc(100vh - 44px);
	}

	.head_num {
		padding-top: 10px;
		width: 100%;
		text-align: center;
		height: 280px;
		background: #196dff;
		box-sizing: border-box;
		padding-bottom: 20px;

		.title {
			display: block;
			color: #fff;
			font-weight: 700;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
		}

		.num_text {
			width: 78px;
			height: 78px;
			border-radius: 50%;
			border: 5px solid #ffb81c;
			background: #fff;
			font-size: 36px;
			font-weight: 700;
			color: #196dff;
			text-align: center;
			line-height: 78px;
			box-shadow: 0 0 55px #ffffff80;
			margin: 0 auto;
		}

		.pgtime {
			font-size: 14px;
			color: #fff;
			margin: 10px 0 5px;
		}

		.gqtime {
			font-size: 10px;
			color: #fff;
			padding: 1px 9px;
			background: rgba(0, 0, 0, 0.14);
			border-radius: 8px;
			box-sizing: border-box;
			width: max-content;
			margin: 0 auto;
		}
	}

	.pg-tiem {
		width: calc(100% - 25px);
		margin: 20px auto 0;
		border-radius: 10px;
		background-color: #fff;
		position: relative;

		header {
			margin-top: 10px;
			width: 100%;
			height: 39px;
			background: linear-gradient(276deg, #d1e2ff, #ecf3ff 51%);
			border-radius: 8px 8px 0 0;
			text-align: center;
			line-height: 39px;
			font-size: 15px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #196dff;
		}

		.pfjd {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.jd-box {
			padding: 10px 10px 20px;
			position: relative;
		}

		.jd-item {
			border: 1px solid #ccc;
			margin-left: -1px;
			width: 20%;
			padding: 4px 0;
			font-size: 13px;
			color: #2279ff;
		}

		.active {
			color: red;
			font-weight: 700;
		}

		.tips {
			color: #666;
			font-size: 12px;
			margin-top: 15px;
		}

		.defInfo {
			font-size: 14px;
			color: #4c5253;
			padding: 5px;
			border-radius: 20px;
			line-height: 22px;
		}

		.flex {
			display: flex;
			align-items: center;
		}

		.user_info {
			line-height: 40px;
			font-weight: 700;
			width: 55%;

			img {
				width: 24px;
				height: 24px;
				margin-right: 10px;
			}
		}

		.cxjg {
			width: 45%;
			font-size: 12px;
			text-align: right;

			img {
				width: 70%;
				max-width: 100px;
			}
		}

		.fl-bh {
			display: flex;
			font-size: 13px;
			color: #666;
			justify-content: space-between;
			margin-top: 10px;
			padding: 0 10px;
		}
	}

	.first {
		margin-top: -70px;
	}

	.content_info {
		width: 100%;
		border-bottom: 1px solid #e3e3e3;
		padding: 10px;
		box-sizing: border-box;
		white-space: nowrap;

		.content_text {
			font-size: 11px;
			font-weight: 700;
			color: #333;
		}

		.content_color_box {
			margin-top: 8px;
			display: flex;
			align-items: center;

			.content_color {
				margin: 0 0.5px;
				width: 48px;
				height: 10px;
				background: #e3e3e3;
				flex-grow: 1;
			}

			.content_color_text {
				margin-left: 4px;
				font-size: 11px;
				font-weight: 700;
				color: #e01919;
			}

			.content_color_a {
				background: #04ae48;
			}

			.content_color_b {
				background: #97ce45;
			}

			.content_color_c {
				background: #fcfb09;
			}

			.content_color_d {
				background: #febc01;
			}

			.content_color_e {
				background: #f37b28;
			}

			.content_color_f {
				background: #f40302;
			}
		}

		.content_base_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 1px;

			.content_base_text {
				font-size: 12px;
				font-weight: 500;
				color: #666;
				width: 100%;
				display: inline-block;
			}
		}
	}

	.dtc {
		padding-left: 5px;
		margin-top: 10px;
		font-size: 15px;
		font-weight: 700;
		color: #196dff;

		.dtc-m {
			margin-bottom: 15px;
		}
	}

	.zxtable {
		.flex {
			display: flex;
			align-items: center;
			justify-content: center;

			.tb-left {
				width: 50%;
				border: 1px solid rgba(25, 109, 255, 0.2);
				background: #f9fdff;
				font-size: 11px;
				font-weight: 700;
				color: #196dff;
				line-height: 35px;
				text-align: center;
				padding: 0 10px;
			}

			.tb-right {
				width: 50%;
				border: 1px solid rgba(25, 109, 255, 0.2);
				background: #f9fdff;
				font-size: 11px;
				font-weight: 700;
				text-align: center;
				color: #196dff;
				align-self: stretch;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.jglx {
		margin-top: 12px;
		padding-left: 20px;
		font-size: 12px;
		font-weight: 700;
		color: #333;
		margin-bottom: 15px;
	}

	.content_base {
		font-size: 12px;
		font-weight: 700;
		color: #196dff;
		line-height: 26px;
		padding: 0 10px;
	}

	.header_top {
		margin-bottom: 12px;
		margin-top: 8px;
		font-size: 12px;
		font-weight: 700;
		color: #196dff;
	}

	.tips-zx {
		margin: 6px 0;
		background: #fffcf3;
		padding: 10px 6px 15px;
		display: flex;
		flex-direction: column;
		border-radius: 6px;

		.titless {
			font-size: 15px;
			font-weight: 700;
			color: #ffba19;
			margin-bottom: 5px;
		}

		.textss {
			font-size: 10px;
			font-weight: 400;
			color: #999;
		}
	}

	.flex_zx {
		display: flex;
		align-items: center;
		margin: 15px 0;

		.zx-left {
			min-width: 130px;
			font-size: 10px;
			font-weight: 700;
			color: #333;
		}

		.zx-right {
			font-size: 10px;
			font-weight: 700;
			color: #666;
		}
	}

	.buttom-recommendation {
		box-sizing: border-box;
		margin-top: 20px;
		width: 355px;
		background: #fff;
		border-radius: 8px;
		padding: 20px;

		.buttom_title {
			font-size: 15px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #196dff;
			margin-bottom: 12px;
		}

		.buttom_text {
			font-size: 10px;
			font-weight: 400;
			color: #999;
		}
	}

	.pg-tiem {
		width: calc(100% - 25px);
		margin: 20px auto 0;
		border-radius: 10px;
		background-color: #fff;
		position: relative;
	}
</style>